<template>
  <!-- 课程页面头部组件 -->
  <div class="course-header">
    <!-- logo -->
    <van-image :src="require('@/assets/my-logo.png')"></van-image>
    <h1>Shuang-edu-mobile</h1>
  </div>
</template>

<script>
// 导入 vant 组件
import { Image } from 'vant'

export default {
  name: 'CourseHeader',
  components: {
    VanImage: Image // vant 的 van-image 组件
  }
}
</script>

<style lang="scss" scoped>
// 整体样式
.course-header {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: sticky;
  top: 0;
  height: 50px;
  background-color: #fff;
  z-index: 1;

  // logo 区域样式
  .van-image {
    width: 40px;

    // logo 图片样式
    .van-image__img {
      width: 40px;
    }
  }

  // 标题样式
  h1 {
    font-size: 20px;
  }
}
</style>
